/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Rokkitt:700);

// Colors
$blue: #092B40;
$lightBlue: #85DEF2;
$water: #52A5D9;
$sky: #5BB5D9;
$orange: #D96F32;

* { 
  box-sizing: border-box;
}

html, body, main {
  font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;

  position: relatiave;
  margin: 0; padding: 0;
  padding-top: 10px;
  width: 100%; height: 100%;
  background-color: $blue;
}

input[type='text'] {
  -webkit-appearance: none;
  outline: none;
  border: none;
}

.wrapper {
  display: flex;
  width: 100%;
  @include display(flex);
	@include flex-direction(column);
	@include align-items(center);
	@include justify-content(center);
  @include transition(all 2s linear);
}

.fullHeight { 
  height: 100%; 
  @include transition-duration(2s);
}

.white-text {
  color: white;
  text-decoration: none;
}



form {
  position: relative;
  display: block;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-left: 0;
  padding: 0;
  margin-bottom: 10px;
  border: 4px solid $orange;
  border-radius: 20px;
  
  @include transition(all .25s ease .3s);
  cursor: pointer;
  &:before {
    @extend %def;
    top: 90%;
    left: 90%;
    width: 16px;
    height: 3px;
    background-color: $orange;
    border-radius: 1px;
    @include transition(width .15s ease .55s);
    @include transform(rotate(45deg));
    @include transform-origin(top left);
  }
  input {
    width: 100%;
    height: 100%;
    padding: 0 30px 0 15px;
    font-size: 14px;
    line-height: 38px;
    opacity: 0;
    background-color: transparent;
    color: white;
    @include transition(opacity .15s ease);
  }
}

.eks {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 20;
	width: 30px;
	height: 30px;
	cursor: pointer;	
	@include transform(translateY(-50%));
	&:before, &:after {
		@extend %def;
		right: 5px;
		height: 2px;
		width: 2px;
		border-radius: 1px;
		@include transition(all .25s ease);
	}
	&:before {
		top: 0px;
		background-color: $orange;
		@include transform(rotate(-45deg));
		@include transform-origin(top right);
		@include transition-delay(.1s);
	}
	&:after {
		bottom: 0px;
		background-color: $orange;
		@include transform(rotate(45deg));
		@include transform-origin(bottom right);
		@include transition-delay(0s);
	}
}

form.open {
  width: 260px;
  @include transition-delay(.1s);
  &:before {
    width: 0px;
    @include transition-delay(0s);
  }
  input {
    opacity: 1;
    @include transition-delay(.15s);
  }
  .eks {
    &:before, &:after {
      width: 15px;
      right: 12px;
    }
    &:before {
      top: 9px;
      @include transition-delay(.25s);
    }
    &:after {
      bottom: 9px;
      @include transition-delay(.3s);
    }
  }
}

ul {
  margin-left: 0; padding-left: 0;
  width: 80%;
  
  a {
    text-decoration: none;
    color: black;
    
    h1 {
      font-size: 18px;
    }
    p {
      font-size: 14px;
    }
  }
  li {
    list-style-type: none;
    display: block;
    margin-bottom: 10px;
    padding: 15px 30px 5px 30px;
    background-color: #E7E7E8;
    opacity: 0;
    @include animation(new-item 1s ease-in-out forwards);
    @include transition-timing-function(cubic-bezier(0.6, 0, 0.4, 1.0));

    &:hover {
      border-left: 5px solid $orange;
      margin-left: -5px;
      //box-shadow: inset 2px -2px 0 $orange;
    }
  }
}

.hide {
  display: none;
}

%def {
  content: '';
  position: absolute;
  display: block;
}

@include keyframes(new-item) {
  0% { opacity: 0; 
    -webkit-transform: translateY(2000px); }
  80% { opacity: 0; }
  100% { opacity: 1;
    -webkit-transform: translateY(0); }
}